<template>
  <div class="aside qrcode">
    <div style="width: 99%; height: 100vh; overflow-y: auto">
      <div class="aside-container">
        <div class="aside-inner">
          <div class="aside-header">
            <div class="flex items-center">
              <svg-icon icon-class="MapLocation" style="font-size: 24px;margin-right: 8px"></svg-icon>
              {{ t('modules.tms.group.location') }} </div>
          </div>
          <hr
            style="
              margin-bottom: 16px;
              border-width: 0px 0px thin;
              border-style: solid;
              border-color: rgba(0, 0, 0, 0.12);
            "
          />   
          <div class="px-4">
            <el-button type="primary" @click="() => visible = true" class="mb-4">{{ t('flypass.add-location') }}</el-button>
            <div v-for="(location, index) in passTemplate.locations" class="py-2">
              {{ index + 1 }}.
              <span class="mr-2"><span class="font-bold mr-2">Longitude:</span> <span> {{  location.longitude.toFixed(2) }} </span> </span>
              <span><span class="font-bold mr-2">Latitude:</span> <span> {{  location.latitude.toFixed(2) }} </span> </span>              
            </div>
          </div>
        </div>
      </div>
    </div>
    <map-dialog v-model:visible="visible"/>
  </div>
</template>

<script lang="ts" setup>
import MapDialog from './map-dialog.vue'
import { usePassStore } from '@/store/modules/pass';

const visible = ref(false)
const { passTemplate } = usePassStore()
const { t } = useI18n()

</script>

<style lang="scss" scoped>
@import url('./styles/index.scss');
</style>